<template>
  <div>
    <div>
      <div>{{ singer.name }}</div>
      <div>{{ singer.singerName }}</div>
    </div>
    <div @click="clickSwitch">
      <div v-if="isSwitch" id="lyric">
        <div v-for="(item, index) in lyric" :key="index">
          <div>{{ item }}</div>
        </div>
      </div>
      <div v-else>
        <img :src="singer.cover" alt="" srcset="" />
      </div>
    </div>
    <video :src="musicUrl" controls autoplay />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      value: "",
      musicUrl: "",
      singer: {},
      isSwitch: false,
      ar: "",
      ti: "",
      al: "",
      by: "",
      offset: "",
      lyric: "",
      // [ar:艺人名]
      // [ti:曲名]
      // [al:专辑名]
      // [by:编者（指编辑LRC歌词的人）]
      // [offset:时间补偿值] 其单位是毫秒，正值表示整体提前，负值相反。这是用于总体调整显示快慢的。
    };
  },
  created() {
    // console.log(this.$route.params.id + " id");
    this.getPlayList();
    this.getStoreSinger();
    this.getLyric();
  },
  methods: {
    getPlayList() {
      var that = this;
      axios
        .get("/jsososo/song/urls", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log(res.data);
          that.musicUrl = res.data.data[that.$route.params.id];
          console.log(that.$route.params.id);
        })
        .catch((err) => {
          console.error(err);
        });
    },

    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    getStoreSinger() {
      // console.log(this.$store.getters.singer);
      // this.singer = this.$store.getters.singer;
      if (Object.keys(this.$store.getters.singer).length == 0) {
        this.singer = JSON.parse(sessionStorage.getItem("singer"));
      } else {
        this.singer = this.$store.getters.singer;
        sessionStorage.setItem(
          "singer",
          JSON.stringify(this.$store.getters.singer)
        );
      }
      // console.log(this.singer);
    },
    clickSwitch() {
      this.isSwitch = !this.isSwitch;
    },
    getLyric() {
      axios
        .get("/api/lyric", {
          params: {
            songmid: this.singer.mid,
          },
        })
        .then((res) => {
          console.log(res.data.data.lyric);
          var text = res.data.data.lyric;
          var lyric = text.split("\n");
          //新建一个数组存放最后结果
          var lrc = new Array();
          var _l = lyric.length;
          for (var i = 0; i < _l; i++) {
            //正则匹配播放时间返回一个数组
            var sj = lyric[i].match(/[d{2}:d{2}((.|:)d{2})]/g);
            //获得该行歌词正文
            var _lrc = lyric[i].replace(/[d{2}:d{2}.d{2}]/g, "");
            //过滤掉空行等非歌词正文部分
            if (sj != null) {
              //可能有多个时间标签对应一句歌词的情况，用一个循环解决
              var _ll = sj.length;
              for (var j = 0; j < _ll; j++) {
                // var _s = sj[j];
                // var min = Number(String(_s.match(/d{2}/i)).slice(1));
                // var sec = parseFloat(String(_s.match(/d{2}.d{2}/i)));
                //换算时间，保留两位小数
                // var _t = 1;
                //把时间和对应的歌词保存到数组
                // lrc.push([_t, _lrc]);
              }
            }
            lrc.push(_lrc);
          }
          //重新按时间排序
          // lrc.sort(function (a, b) {
          //   return a[0] - b[0];
          // });
          // var lyc = res.data.data.lyric;

          // var lrc = new Array();
          // // // var _l = lyc.length;
          // var sj = lyc.replace(/\[\d{2}(:)\d{2}(.)\d{2}\]/g, " ");
          // lrc.push(sj);
          this.lyric = lrc;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style scoped>
div {
  color: black;
}
</style>